<template>
    <div class="chatContainer">
        <div class="chatContent">
            <div class="back" @click="goBack"></div>
            <p class="title">{{ friend.name }}</p>
            <div class="setting"></div>
        </div>
        <div class="eachChat">
            <ul class="eschs">
                <li v-for="each in eachs" :key="each.id">
                    <div class="each" :style="each.who==='me'?meEachStyle:friendEachStyle">
                        <p class="sendTime">{{ each.time }}</p>
                        <div class="sendInfo" :style="each.who==='me'?meStyle:friendStyle">
                            <div class="message" :style="each.who==='me'?meMessageStyle:friendMessageStyle">
                                <p class="messageContent">
                                    {{ each.message }}
                                </p>
                        </div>
                            <div class="eachImg"></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="sendMessage">
            <div class="sendContent">
                <div class="sound"></div>
                <input type="text" placeholder="发消息">
                <div class="emoji"></div>
                <div class="sendMore"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'myChat',
        data(){
            return{
                friend:{name:'hhhin'},
                eachs:[
                    {id:0,time:'12:00',message:'hi hi，昨天你说的运动方式我尝试过了,感觉很适合我,谢谢!',who:'me'},
                    {id:1,time:'',message:'那就好呢！',who:'friend'},
                    {id:2,time:'',message:'下次有机会我们可以一起呢！',who:'me'},
                    {id:3,time:'',message:'好的，下次可以去健身房！',who:'friend'},
                    {id:4,time:'',message:'好!',who:'me'},
                ],
                meEachStyle:{
                    'alignItems':'end'
                },
                friendEachStyle:{
                    'alignItems':'start'
                },
                meStyle:{
                    'flexDirection':'row'
                },
                friendStyle:{
                    'flexDirection':'row-reverse'
                },
                meMessageStyle:{
                    'backgroundColor':'rgb(42, 130, 228)',
                    'color':'#FFF',
                    'marginRight':'.2rem'
                },
                friendMessageStyle:{
                    'backgroundColor':'#FFF',
                    'color':'#333333',
                    'marginLeft':'.2rem'
                }
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            }
        },
        mounted(){
            this.friend.name=this.$route.query.name
        },
    }
</script>

<style scoped>
    .chatContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .chatContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        margin-right: .16rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .setting{
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/7-icon@2x/7-3setting.png);
        width: .48rem;
        height: .48rem;
    }
    .eachChat{
        width: 100%;
        margin-top: 2rem;
    }
    .eachs{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .each{
        width: 6.86rem;
        margin: 0 auto;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        align-items: end;
    }
    .sendTime{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .24rem;
        margin-bottom: .2rem;
    }
    .sendInfo{
        display: flex;
    }
    .message{
        border-radius: .3rem;
        font-family: 'PingFangSC-Regular';
        max-width: 5rem;
    }
    .messageContent{
        margin: .2rem .2rem;
    }
    .eachImg{
        background-color: #FFF;
        border-radius: 50%;
        width: .88rem;
        height: .88rem;
    }
    .sendMessage{
        width: 100%;
        background-color: #FFF;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .sendContent{
        width: 6.86rem;
        margin: .4rem auto;
        display: flex;
        align-items: center;
    }
    input{
        border: 0;
        width: 200px;
        height: 40px;
        border-radius: 30px;
        background-color: rgb(246, 248, 250);
        text-indent: .4rem;
    }
    input::placeholder{
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .24rem;
    }
</style>